<template>
    <div>
        <h1>App</h1>
        <input type="text" v-model="info.size.w">{{ info.size.w }}
    </div>
</template>
<script setup>
/*
    ref 是一个函数API
    1. 输入是任意数据类型
    2. 输出是一个对象
    ref.value 保存了真实的数据
    1. value 在模板中不需要写value属性，只需要写变量名(解包)
    2. 其他地方需要
*/
import { ref, shallowRef } from 'vue';
const title = ref('hello');
// const info = ref({ name: 'jack', age: 20, size: { h: 100, w: 200 } })
const info = shallowRef({ name: 'jack', age: 20, size: { h: 100, w: 200 } });
console.log(info.value.name);
console.log(info.value.size.w);
setInterval(() => { info.value.size.w++ }, 2000);
setTimeout(() => {
    info.value = { name: 'jack', age: 20, size: { h: 1000, w: 2000 } }
}, 3000);


</script>

<style>
div {
    border: solid;
    padding: 10px;
}
</style>